<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>文件下载 | 陈梁月</title>
    <meta name="generator" content="VuePress 1.6.0">
    
    <meta name="description" content="
利用 a 标签的 href 设置文件下载路径， download 来设置文件的名字
`html
`
下面就有两个问题了怎么获取到 href 的地址，和 download 的名字呢？
href 地址获取
后端直接提供
用 ...">
    <link rel="preload" href="/jiraiya-chen-blog/assets/css/0.styles.a76d507b.css" as="style"><link rel="preload" href="/jiraiya-chen-blog/assets/js/app.61a538cd.js" as="script"><link rel="preload" href="/jiraiya-chen-blog/assets/js/6.cdd050e5.js" as="script"><link rel="preload" href="/jiraiya-chen-blog/assets/js/3.c32d983c.js" as="script"><link rel="preload" href="/jiraiya-chen-blog/assets/js/21.ca86705f.js" as="script"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/10.69f07e0e.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/11.53f87820.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/12.ae4be476.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/13.3c5cc435.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/14.7fe16526.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/15.35217ffc.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/16.a0eac610.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/17.82bb9b86.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/18.217868a1.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/19.9bd59858.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/20.654ddc5a.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/22.82e1511c.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/23.460b2cad.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/24.cc206537.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/4.00b7630e.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/5.631f1efc.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/7.7b6ab354.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/8.0b74c858.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/9.ce3d6c06.js"><link rel="prefetch" href="/jiraiya-chen-blog/assets/js/vuejs-paginate.c82c253b.js">
    <link rel="stylesheet" href="/jiraiya-chen-blog/assets/css/0.styles.a76d507b.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><section id="header-wrapper"><header id="header"><div class="header-wrapper"><div class="title"><a href="/jiraiya-chen-blog/" class="nav-link home-link">陈梁月 </a></div> <div class="header-right-wrap"><ul class="nav"><li class="nav-item"><a href="/jiraiya-chen-blog/" class="nav-link">博文</a></li><li class="nav-item"><a href="/jiraiya-chen-blog/tag/" class="nav-link">标签</a></li></ul> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></div></header></section> <div id="mobile-header"><div class="mobile-header-bar"><div class="mobile-header-title"><a href="/jiraiya-chen-blog/" class="nav-link mobile-home-link">陈梁月 </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div> <div class="mobile-menu-wrapper"><hr class="menu-divider"> <ul class="mobile-nav"><li class="mobile-nav-item"><a href="/jiraiya-chen-blog/" class="nav-link">博文</a></li><li class="mobile-nav-item"><a href="/jiraiya-chen-blog/tag/" class="nav-link">标签</a></li> <li class="mobile-nav-item"><!----></li></ul></div></div></div> <div class="content-wrapper"><div id="vuepress-theme-blog__post-layout"><article itemscope="itemscope" itemtype="https://schema.org/BlogPosting" class="vuepress-blog-theme-content"><header><h1 itemprop="name headline" class="post-title">
        文件下载
      </h1> <div class="post-meta"><div itemprop="publisher author" itemtype="http://schema.org/Person" itemscope="itemscope" class="post-meta-author"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-navigation"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg> <span itemprop="name">Jiraiya</span> <span itemprop="address">   in Suzhou</span></div> <div class="post-meta-date"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> <time pubdate itemprop="datePublished" datetime="2023-09-20T00:00:00.000Z">
      2023-09-20
    </time></div> <ul itemprop="keywords" class="post-meta-tags"><li class="post-tag" data-v-42ccfcd5><a href="/jiraiya-chen-blog/tag/Axois" data-v-42ccfcd5><span data-v-42ccfcd5>Axois</span></a></li></ul></div></header> <div itemprop="articleBody" class="content__default"><h4 id="整体思路"><a href="#整体思路" class="header-anchor">#</a> 整体思路：</h4> <p>利用 a 标签的 href 设置文件下载路径， download 来设置文件的名字</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/文件地址/xxx/name.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>name.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>下面就有两个问题了怎么获取到 href 的地址，和 download 的名字呢？</p> <h6 id="href-地址获取"><a href="#href-地址获取" class="header-anchor">#</a> href 地址获取</h6> <ol><li>后端直接提供</li> <li>用 blob 转成 url</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 一般接口请求获取的就是blob格式的数据</span>
<span class="token comment">// 注：如果需要将数据转换成blob 需要异步等待</span>
<span class="token comment">// const blob = new Blob([data], { type: 'application/force-download' })</span>
<span class="token keyword">let</span> url <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h6 id="download"><a href="#download" class="header-anchor">#</a> download</h6> <ol><li><p>自己命名</p></li> <li><p>根据接口</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> <span class="token punctuation">{</span> data<span class="token punctuation">,</span> headers <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">api</span><span class="token punctuation">(</span>pData<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 这边跟后端协商，名字写在这</span>
<span class="token keyword">let</span> contentDisposition <span class="token operator">=</span> headers<span class="token punctuation">[</span><span class="token string">'content-disposition'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 需要转码</span>
<span class="token keyword">let</span> toChinese <span class="token operator">=</span> <span class="token function">decodeURI</span><span class="token punctuation">(</span>contentDisposition<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ol></div> <footer><!----> <hr> <!----></footer></article> <!----></div></div> <footer class="footer" data-v-fdbf4940><div class="footer-left-wrap" data-v-fdbf4940><ul class="contact" data-v-fdbf4940></ul></div> <div class="footer-right-wrap" data-v-fdbf4940><ul class="copyright" data-v-fdbf4940><li class="copyright-item" data-v-fdbf4940><a href="/jiraiya-chen-blog/2023/09/20/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/.html" class="nav-link" data-v-fdbf4940>Jiraiya Chen © 2023</a></li></ul></div></footer></div><div class="global-ui"></div></div>
    <script src="/jiraiya-chen-blog/assets/js/app.61a538cd.js" defer></script><script src="/jiraiya-chen-blog/assets/js/6.cdd050e5.js" defer></script><script src="/jiraiya-chen-blog/assets/js/3.c32d983c.js" defer></script><script src="/jiraiya-chen-blog/assets/js/21.ca86705f.js" defer></script>
  </body>
</html>
